<template>
  <div>
    <h2 class="text-xl font-bold mb-4 text-gray-800">添加新待办</h2>
    <form @submit.prevent="handleSubmit">
      <div class="flex flex-col sm:flex-row gap-3">
        <input 
          type="text" 
          v-model="newTodoTitle" 
          placeholder="输入待办事项..." 
          class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
          required
        >
        <button 
          type="submit" 
          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all flex items-center justify-center"
        >
          <i class="fa fa-plus mr-2"></i> 添加
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'

const emits = defineEmits<{
  (e: 'add-todo', todo: { id: number, title: string, completed: boolean, createdAt: Date }): void
}>()

const newTodoTitle = ref('')

const handleSubmit = () => {
  if (newTodoTitle.value.trim()) {
    const newTodo = {
      id: Date.now(),
      title: newTodoTitle.value.trim(),
      completed: false,
      createdAt: new Date()
    }
    emits('add-todo', newTodo)
    newTodoTitle.value = ''
  }
}
</script>

<style scoped>
button[type="submit"] {
  transition: all 0.3s ease;
}

button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>
  